<template>
  <div>
    <el-upload
      accept=".jpg, .png, .jpeg, .gif"
      action="https://jsonplaceholder.typicode.com/posts/"
      :multiple="true"
      :on-preview="handlePreview"
      :file-list="fileList"
      :on-remove=" handleRemove"
      :http-request="customRequest"
    >
      <el-button>
        <i class="el-icon-upload" />上传
      </el-button>
    </el-upload>
    <preview-modal ref="previewModal" />
  </div>
</template>

<script>
import { saveOnlyUploads } from '@/api/supplier'
import PreviewModal from '@/components/PreviewModal'

export default {
  components: {
    PreviewModal
  },
  methods: {
    // 预览图片
    handlePreview(file) {
      console.log('file', file)
      let arr = []
      this.fileList.map(v => {
        arr.push(v.url)
      })
      this.$refs.previewModal.show(arr)
      // console.log('tableData', this.itemArr[index].tableData, ind, one)
    },
    // 删除图片事件处理
    handleRemove(file, fileList, row, item) {
      console.log(file, fileList)
      this.fileList = [...fileList]
    },
    // 上传图片事件处理
    customRequest(info) {
      // const _this = this
      console.log('customRequest', info)
      const formData = new FormData()
      formData.append('file', info.file)
      // 调方法，post，body 放入 formData
      // this.fileList = []

      saveOnlyUploads(formData).then(res => {
        if (res.data !== null) {
          const { data } = res
          this.fileList.push(data)
          this.fileList[this.fileList.length - 1].url = data.fileUrl + data.fileName
          this.fileList[this.fileList.length - 1].savePath = data.fileUrl + data.fileName
          this.fileList[this.fileList.length - 1].name = data.uploadTitle

          console.log('fileList', this.fileList)

          let arr = []
          this.fileList.map(v => {
            arr.push(v.uploadId)
          })

          this.$set(this.form, 'photos', arr.join(','))
        }
      })
    }
  }
}
</script>
